import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu } from 'antd';
import React, { useState } from 'react';
import './index.css'
import Navone from '../nav_one/index';


const { Header, Content, Sider } = Layout;
const items1 = ['1'].map((key) => ({
    key,
    label: `nav ${key}`,
}));
// const items2 = [UserOutlined, LaptopOutlined, NotificationOutlined].map((icon, index) => {
//   const key = String(index + 1);
//   return {
//     key: `sub${key}`,
//     icon: React.createElement(icon),
//     label: `subnav ${key}`,
//     children: new Array(4).fill(null).map((_, j) => {
//       const subKey = index * 4 + j + 1;
//       return {
//         key: subKey,
//         label: `option${subKey}`,
//       };
//     }),
//   };
// });





const Top = () => {
    const [Idkey, setIdkey] = useState('1');
    const handkey = ({ key }) => {
        setIdkey(key)
    }
    const People = () => {
        if (Idkey === '1') {
            return <Navone />
        }
        
    }
return (
    <Layout className='laytt'>
        <Header className="header">
            <div className="logo" />
            <Menu theme="dark" mode="horizontal" onClick={handkey} defaultSelectedKeys={['1']} items={items1} />
        </Header>
        <Content>
            <People />
        </Content>
    </Layout>
)
 
};
export default Top;